<template>
  <Form
    :label-width="80"
    ref="formValidate"
    :model="formValidate"
    :rules="ruleValidate"
    label-position="left"
  >
    <FormItem label="所属单位" prop="fkOrgId">
      <Select v-model="formValidate.fkOrgId" clearable v-show="type !== 3">
        <Option v-for="item in topUnitList" :value="item.id" :key="item.id">{{ item.orgName }}</Option>
      </Select>
      <span v-show="type === 3">{{unitName}}</span>
    </FormItem>
    <FormItem label="部门名称" prop="deptName">
      <i-input
      v-show="type !== 3"
        type="text"
        v-model="formValidate.deptName"
        placeholder="请输入部门名称"
      >
      </i-input>
      <span v-show="type === 3">{{formValidate.deptName}}</span>
    </FormItem>

    <FormItem label="部门编号" prop="deptCode">
      <i-input
      v-show="type !== 3"
        type="text"
        v-model="formValidate.deptCode"
        placeholder="部门编号"
        :disabled="type === 3"
      >
      </i-input>
      <span v-show="type === 3">{{formValidate.deptCode}}</span>
    </FormItem>

    <FormItem label="上级部门">
      <Select v-model="formValidate.fkParentId" clearable v-show="type !== 3">
        <Option v-for="item in deptList" :value="item.id" :key="item.id">{{ item.deptName }}</Option>
      </Select>
       <span v-show="type === 3">{{topDeptName}}</span>
    </FormItem>
    <FormItem label="部门地址">
      <i-input
      v-show="type !== 3"
        type="text"
        v-model="formValidate.address"
        placeholder="部门地址"
        :disabled="type === 3"
      >
      </i-input>
       <span v-show="type === 3">{{formValidate.address}}</span>
    </FormItem>
    <FormItem label="部门邮箱" prop="email">
      <i-input
      v-show="type !== 3"
        type="text"
        v-model="formValidate.email"
        placeholder="部门邮箱"
        :disabled="type === 3"
      >
      </i-input>
      <span v-show="type === 3">{{formValidate.email}}</span>
    </FormItem>
    <FormItem label="部门传真">
      <i-input
      v-show="type !== 3"
        type="text"
        v-model="formValidate.fax"
        placeholder="部门传真"
        :disabled="type === 3"
      >
      </i-input>
       <span v-show="type === 3">{{formValidate.fax}}</span>
    </FormItem>
    <FormItem label="负责人">
      <i-input
      v-show="type !== 3"
        type="text"
        v-model="formValidate.contacts"
        placeholder="负责人"
        :disabled="type === 3"
      >
      </i-input>
       <span v-show="type === 3">{{formValidate.contacts}}</span>
    </FormItem>
    <FormItem label="部门级别" prop="deptLevel">
      <i-input
        v-show="type !== 3"
        type="number"
        v-model="formValidate.deptLevel"
        placeholder="部门级别"
        :disabled="type === 3"
      >
      </i-input>
      <span v-show="type === 3">{{formValidate.deptLevel}}</span>
    </FormItem> <FormItem label="部门类型" prop="deptType">
      <i-input
        v-show="type !== 3"
        type="text"
        v-model="formValidate.deptType"
        placeholder="部门类型"
        :disabled="type === 3"
      >
      </i-input>
      <span v-show="type === 3">{{formValidate.deptType}}</span>
    </FormItem>
    <FormItem label="排序" prop="sortCode">
      <i-input
        v-show="type !== 3"
        type="number"
        v-model="formValidate.sortCode"
        placeholder="排序"
        :disabled="type === 3"
      >
      </i-input>
      <span v-show="type === 3">{{formValidate.sortCode}}</span>
    </FormItem>
     <FormItem prop="memo" label="创建人" v-show="type === 3">
       <span>{{formValidateView.createUserName}}</span>
    </FormItem>
    <FormItem prop="memo" label="创建时间" v-show="type === 3">
       <span>{{formValidateView.gmtCreate}}</span>
    </FormItem>
    <FormItem prop="memo" label="修改人" v-show="type === 3">
       <span>{{formValidateView.updateUserName}}</span>
    </FormItem>
    <FormItem prop="memo" label="修改时间" v-show="type === 3">
       <span>{{formValidateView.gmtModified}}</span>
    </FormItem>
    <FormItem>
      <Button
        type="primary"
        @click="publicSubmit('formValidate')"
        v-if="type !== 3"
      >确定
      </Button>
      <Button @click="publicReset('formValidate')" style="margin-left: 8px">取消</Button>
    </FormItem>
  </Form>
</template>

<script>
import { updateMixin } from '../../../mixin'
import API_KEY from '../../../api'
import { getDeptSelect } from '../../../api/modules/user/dept'
import { isEmail } from '../../../utils/verification'

export default {
  name: 'DeptManageUpdate',
  mixins: [updateMixin],
  props: {
    topUnitList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    unitName () {
      const arr = this.topUnitList.filter(item => item.id === this.formValidate.fkOrgId)
      if (arr.length > 0) {
        return arr[0].orgName
      }
      return ''
    },
    topDeptName () {
      const arr = this.deptList.filter(item => item.id === this.formValidate.fkParentId)
      if (arr.length > 0) {
        return arr[0].deptName
      }
      return ''
    }
  },
  data () {
    return {
      formValidate: {
        deptName: '',
        id: '',
        fkParentId: '',
        fkOrgId: '',
        deptCode: '',
        address: '',
        email: '',
        contacts: '',
        fax: '',
        deptLevel: '',
        deptType: '',
        sortCode: ''
      },
      deptList: [],
      ruleValidate: {
        fkOrgId: [{ required: true, message: '当前项不能为空', trigger: 'blur' }],
        deptCode: [{ required: true, message: '当前项不能为空', trigger: 'blur' }],
        deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
        email: [{
          validator: (rule, value, callback) => {
            if (value === '' || isEmail(value) || this.formValidate.email == null) {
              callback()
            } else {
              callback(new Error('邮箱格式错误'))
            }
          },
          trigger: 'blur'
        }]
      },
      action: {
        // 根据id获取数据（如果使用混入，属性名不能变，所在位置不能变,下同）
        readDataById: API_KEY.dept.def,
        // 新增数据
        createData: API_KEY.dept.def,
        // 更新数据
        updateData: API_KEY.dept.def
      }
    }
  },
  mounted () {
    this.getDeptSelect()
  },
  methods: {
    getDeptSelect () {
      getDeptSelect(this.formValidate.fkOrgId).then(res => {
        this.deptList = res.data
      })
    }
  }
}
</script>

<style scoped>

</style>
